<template>
	<!-- 招考我的订单 -->
	<view>
		<u-empty text="订单为空" marginTop="100" v-if="!list.length"></u-empty>
		<view class="pl20 pr20" v-for="(item,index) in list" :key="index">
			<!-- 每一项盒子 -->
			<view class="box-item flex pl30	pt30 pb34 mt28">
				<!-- 左侧 -->
				<image :src="$baseUrl+item.interview_model.image" class="w180 h180"></image>
				<!-- 右侧 -->
				<view class="box-item-r flex row-column row-between ml30">
					<view class="box-item-r-tit">{{item.interview_model.title}}</view>
					<view class="h40 box-item-r-type">{{item.category_name}}</view>
					<view class="">
						<text class="box-item-r-pay">支付金额:</text>
						<text class="box-item-r-pic">￥{{item.interview_model.price}}</text>
					</view>
				</view>
			</view>
			<!-- /每一项盒子 -->
		</view>
	</view>
</template>

<script>
	export default {
		name:'myOrder',
		data() {
			return {
				type: '',
				list: [],
				page: 1
			};
		},
		onReachBottom() {
			this.page++
			this.getlist()
		},
		onLoad(e) {
			console.log(e)
			if (e.type) {
				this.type = e.type
			}
			this.getlist()
		},
		methods: {
			getlist() {
				let data = {
					// category_id: this.menu[this.current].id,
					page: 1,
					size: this.page * 10
				}
				let api = ''
				if (this.type == 1) {
					api = 'writtenUserPayList'
				} else if (this.type == 2) {
					api = 'interviewPayList'
				}
				this.$api[api](data).then(res => {
					this.list = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	.box-item {
		background-color: #FFFFFF;
		box-shadow: 0px 6rpx 20rpx 0px #E8EAEF;
		border-radius: 14rpx;

		.box-item-r {
			.box-item-r-tit {
				font-size: 30rpx;
				color: #0C162E;
			}

			.box-item-r-type {
				width: 120rpx;
				height: 40rpx;
				background: #F1F3F5;
				border-radius: 6rpx;
				font-size: 22rpx;
				font-weight: 500;
				color: #6D788B;
				text-align: center;
				line-height: 40rpx;
			}

			.box-item-r-pic {
				font-size: 24rpx;
				color: #FF286A;
			}

			.box-item-r-pay {
				font-size: 24rpx;
				font-weight: 500;
				color: #6D788B;
			}
		}
	}
</style>
